<template>

  <el-container>
    <el-header>
      <div style="margin-left: 100px">
        <h1>
          <tr>
            2024年<span><font color="red">软件测试</font></span>失业现状分享
          </tr>
          <tr><span><font color="#dc143c">铁五铜六</font></span>软测工作到底能拿多少钱</tr>
        </h1>
      </div>
    </el-header>
    <el-main>
      <table border="1" style="margin-left: 10px">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-left: 30px">
          <el-form :inline="true" :model="filters">
            <el-form-item label="城市">
              <el-select v-model="filters.city" placeholder="选择城市" clearable filterable allow-create
                         :style="{width: '100px'}" @clear="handleCurrentChange(1)" @change="handleCurrentChange(1)">
                <el-option-group
                    v-for="group in options"
                    :key="group.label"
                    :label="group.label">
                  <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
              <!--					<el-input v-model="filters.city" placeholder="城市"></el-input>-->
            </el-form-item>
            <el-form-item label="学历">

              <el-select v-model="filters.degree" placeholder="选择学历" allow-create filterable clearable
                         :style="{width: '100px'}" @clear="handleCurrentChange(1)" @change="handleCurrentChange(1)">
                <el-option label="统本" value="统本"></el-option>
                <el-option label="函授本科" value="函授本科"></el-option>
                <el-option label="民本" value="民本"></el-option>
                <el-option label="大专" value="大专"></el-option>
                <el-option label="专升本" value="专升本"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
                <el-option label="海归" value="海归"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="年龄">
              <el-input v-model="filters.age_begin" :style="{width: '60px'}"></el-input>
              :
              <el-input v-model="filters.age_end" :style="{width: '60px'}"></el-input>&nbsp;&nbsp;
              <el-button type="primary" v-on:click="handleCurrentChange(1)">查询</el-button>
              <el-button type="primary" v-on:click="handleCurrentChangeClear()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="users" highlight-current-row v-loading="listLoading"
                  style="width: 100%;">
          <el-table-column prop="nickname" label="昵称" :formatter="formatName">
          </el-table-column>
          <el-table-column prop="income_monthly" label="薪资" sortable :formatter="formatIncome">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="60" sortable>
          </el-table-column>
          <el-table-column prop="experience" label="经验" width="60" sortable :formatter="formatExperience">
          </el-table-column>
          <el-table-column prop="degree" label="学历">
          </el-table-column>
          <el-table-column prop="speciality" label="专业">
          </el-table-column>
          <el-table-column prop="city" label="城市">
          </el-table-column>
          <el-table-column prop="level" label="级别">
          </el-table-column>
          <el-table-column prop="onjob" label="在职/离职">
          </el-table-column>
          <el-table-column prop="unemployment_time" label="失业时间" sortable>
          </el-table-column>
          <el-table-column label="操作">
            <!--
                slot-scope：作用域插槽，可以获取表格数据
                scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope固定写法
            -->
            <template #default="scope">
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="12" :total="total"
                         style="text-align: center;">
          </el-pagination>
        </el-col>
      </table>
    </el-main>


  </el-container>
</template>

<style>
.el-table td {
  padding: 5px 10px; /* 根据需要调整数值 */
}
</style>

<script>

import axios from "axios";

export default {
  name: "douin-search",
  data() {
    return {
      web_url :'http://localhost:8000/user/',
      filters: {
        degree: '',
        age_begin: '20',
        age_end: '45',
        city: '',
        income: ''
      },
      options: [{
        label: '热门城市',
        options: [
          {
            level: 1,
            value: '北京',
            label: '北京'
          }, {
            level: 1,
            value: '上海',
            label: '上海'
          },
          {
            level: 1,
            value: '广州',
            label: '广州'
          },
          {
            level: 1,
            value: '深圳',
            label: '深圳'
          }
        ]
      }, {
        label: '较热城市',
        options: [
         {
            level: 2,
            value: '杭州',
            label: '杭州'
          },
          {
            level: 2,
            value: '无锡',
            label: '无锡'
          },
          {
            level: 2,
            value: '南京',
            label: '南京'
          },
          {
            level: 2,
            value: '苏州',
            label: '苏州'
          },
          {
            level: 2,
            value: '成都',
            label: '成都'
          }, {
            level: 2,
            value: '大连',
            label: '大连'
          },
          {
            level: 2,
            value: '武汉',
            label: '武汉'
          }
          ]
      }],
      users: [],
      total: 0,
      page: 1,
      listLoading: true,
      sels: [],//列表选中列

      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ]
      },
      //编辑界面数据
      editForm: {
        id: 0,
        name: '',
        sex: -1,
        age: 0,
        birth: '',
        addr: ''
      },

      addFormVisible: false,//新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ]
      },
      //新增界面数据
      addForm: {
        name: '',
        sex: -1,
        age: 0,
        birth: '',
        addr: ''
      }

    }
  },
  methods: {

    handleDelete(row) {
      console.log(row);
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        let url = this.web_url + row.id + '/'
        axios.delete(url)
            .then(response => {
              console.log(response.data);
              this.getUsers()
            })
      }).catch(() => {

      });
    },
    getUserListPage(para) {
      let url = this.web_url + '?page=' + para.page + "&city=" + para.city +
          "&age=" + para.age + "&degree=" + para.degree
      console.log("url-------" + url)
      axios.get(url)
          .then(response => {
            // 请求成功处理
            console.log(response.data);
            this.users = response.data.results
            this.listLoading = false;
            this.total = response.data.count
          })
          .catch(error => {
            // 请求失败处理
            this.listLoading = false;
            console.error(error);
          });
    },
    //性别显示转换
    formatName: function (row) {
      let nick_suffix = row.sex === '男' ? '*先生' : '*女士'
      return row.nickname + "" + nick_suffix
    },

    formatIncome: function (row) {
      return row.income_monthly + "k"
    },
    formatExperience: function (row) {
      return row.experience + "年"
    },
    handleCurrentChangeClear() {
      this.page = 1;
      this.filters.city = '';
      this.filters.degree = '';
      this.filters.age_begin = 20;
      this.filters.age_end = 45;
      this.getUsers();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getUsers();
    },
    //获取用户列表
    getUsers() {
      let para = {
        page: this.page,
        city: this.filters.city,
        degree: this.filters.degree,
        age: this.filters.age_begin + ',' + this.filters.age_end
      };
      console.log("to -----");
      console.log(para);
      this.listLoading = true;
      this.getUserListPage(para);
    },

    selsChange: function (sels) {
      this.sels = sels;
    }
  },
  //页面第一次创建方法 生命周期
  mounted() {
    this.getUsers();
  }
}

</script>

<style scoped>

</style>
